<!-- 点击图片渐隐渐现效果 -->
<template>
  <!-- 单个组件动画 transition ，里面 放一个 插槽 slot ，在一些时间点上，插入一些 class 名字，来实现动画 -->
  <transition name="change">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="less" scoped>
  .change-enter, .change-leave-to{
    opacity: 0;
  }
  .change-enter-active, .change-leave-active{
    transition: opacity .5s;
  }
</style>
